import React, { useEffect, useMemo, useState } from 'react'
import { createPortal } from 'react-dom'//创建html结构
import {getComponentById,useComponentsStore} from '../../stores/components'
interface HoverMaskProps {
    containerClassName: string
    componentId: number
    portalWrapperClassName: string
}
//HoverMask会在鼠标移到组件上时触发，会用一层遮盖层遮盖当前组件
export default function HoverMask({ containerClassName, componentId,portalWrapperClassName }: HoverMaskProps) {//containerClassName为组件类名，拿宽高
    const {components} = useComponentsStore()
    const [position, setPosition] = useState({
        top: 0,
        left: 0,
        width: 0,
        height: 0,
        labelTop:0,//控制文字位置
        labelLeft:0,//控制文字位置
    })
    useEffect(()=>{
        updatePosition()//更新蒙层位置
    },[componentId])
    function updatePosition(){
        if(!componentId){
            return
        }
        const container=document.querySelector(`.${containerClassName}`)//按照类名拿到最外层div组件
        if(!container){
            return
        }
        const node=container.querySelector(`[data-component-id="${componentId}"]`)//按照属性找到要被蒙层的组件
        if(!node){
            return
        }
        const { top, left, width, height } = node.getBoundingClientRect()//拿到组件的位置和大小
        const { top:containerTop,left:containerLeft }=container.getBoundingClientRect()//拿到容器的位置和大小
        setPosition({//核心是将 “视口坐标” 转换为 “相对于外层容器的坐标”
            top:top-containerTop+container.scrollTop,//组件相对于容器的顶部距离
            left:left-containerLeft+container.scrollTop,
            width,
            height,
            labelTop:top-containerTop+container.scrollTop,
            labelLeft:left-containerLeft+width,
        })
    }
    const el=useMemo(()=>{
        // const el=document.createElement('div')//创建一个div容器
        // el.className='wrapper'
        // const container=document.querySelector(`.${containerClassName}`)//找到组件容器
        // container!.appendChild(el)//添加一个空div作为子组件,让蒙层的div添加到子组件上
        // return el
        return document.querySelector(`.${portalWrapperClassName}`)//将蒙层的组件添加到该类名的div上
    },[])
    const curComponent=useMemo(()=>{
        return getComponentById(componentId,components)
    },[componentId])

    return createPortal((
        <>
        <div style={{
            position:'absolute',
            top:position.top,
            left:position.left,
            width:position.width,
            height:position.height,
            background:'rgba(0,0,255,0.1)',
            border:'1px dashed bule',
            borderRadius:'4px',
            boxSizing:'border-box',
            pointerEvents:'none',//鼠标事件为none
            zIndex:12,//层级
        }}></div>
        <div
        style={{
            position:'absolute',
            top:position.labelTop,
            left:position.labelLeft,
            fontSize:14,
            zIndex:13,
            display:(!position.width||position.width<10?'none':'inline-block'),
            transform:'translate(-100%,-100%)',
        }}>
            <div
            style={{
            padding: '0px 8px',
            backgroundColor: 'blue',
            color: '#fff',
            borderRadius: 4,
            cursor: 'pointer',
            whiteSpace: 'nowrap',
          }}
            >{curComponent?.desc}</div>
        </div>
        </>
    ), el as HTMLElement)
}
